<template></template>

<script setup lang="ts">
import * as L from 'leaflet'
import type { IPixelLayerStyleOptions } from '@quickearth/core'
const centerApi = import.meta.env.VITE_BASE_URL
import {
  GridDataGLFillMode,
  MemoryWindDataProvider,
  QEGridDataProvider,
  getBinary,
  resourceService,
  getText,
  MicapsDiamond4GridDataProvider
} from '@quickearth/core'
import { LGridLabelLayer, LPixelLayer } from '@quickearth/leaflet'
import { usePredictionStore } from '@/pages/conventional-fine-forecasting/store/store'
import apiList from '@/pages/conventional-fine-forecasting/api/api'
const predictionStore = usePredictionStore()

const gdskjcCurrentActive = computed(() => predictionStore.gdskjcCurrentActive)
const timerIndex = computed(() => predictionStore.timerIndex)
const timerInterval = computed(() => predictionStore.timerInterval)
const rowData = ref([])
const baseMap = inject('baseMap')
const layers = L.layerGroup().addTo(toRaw(baseMap.value))
let labelLayer
async function updateGridLayer(type, styleType) {
  await resourceService.loadResourceFromConfigPath(
    'demos/styles/demo.config.json'
  )
  layers.clearLayers()
  let provider
  if (styleType == 'wind') {
    let newList =
      rowData.value[
        timerIndex.value
          ? timerIndex.value == 0
            ? 0
            : timerIndex.value - 1
          : 1
      ].url.split(',')
    const uBuffer = await getBinary(centerApi + newList[0]) // uwind
    const vBuffer = await getBinary(centerApi + newList[1]) // uwind
    const uProvider = new QEGridDataProvider(uBuffer[0])
    const vProvider = new QEGridDataProvider(vBuffer[0])
    provider = new MemoryWindDataProvider(uProvider, vProvider, {
      lazyCalc: false,
      isUV: true
    })
  } else {
    const Buffer = await getBinary(
      centerApi +
        rowData.value[
          timerIndex.value
            ? timerIndex.value == 0
              ? 0
              : timerIndex.value - 1
            : 1
        ].url
    )
    provider = new QEGridDataProvider(Buffer[0])
  }

  const labelStyle = {
    text: {
      data: '#decimal',
      offset: [0, 15]
    }
  }
  labelLayer = new LGridLabelLayer()
    .setDataSource(provider)
    .setDrawOptions(labelStyle)
  layers.addLayer(labelLayer)
  predictionStore.mapLoading = false
}
const handleShowLayer = type => {
  const currentSelect = predictionStore.gdskjcOptions.find(
    i => i.value === gdskjcCurrentActive.value
  )
  if (currentSelect) {
    updateGridLayer(type, currentSelect.legendStyle)
  }
}
useEventBus('handleShowGridPointMonitoringLayer').on(handleShowLayer)
const initData = () => {
  apiList
    .getTimerShaftAndchoroplethicMap({
      intervalHour: timerInterval.value ? timerInterval.value : 1,
      elementCode: predictionStore.gdskjcCurrentActive
    })
    .then(res => {
      rowData.value = res.data.list
    })
}
watch(
  () => gdskjcCurrentActive.value,
  val => {
    if (val !== 'none') {
      if (layers) {
        layers.clearLayers()
      }
      initData()
      setTimeout(() => {
        handleShowLayer(val)
      }, 500)
    } else {
      layers.clearLayers()
    }
  },
  {
    deep: true
  }
)
watch(
  () => timerInterval.value,
  newV => {
    initData()
    setTimeout(() => {
      layers.clearLayers()
      handleShowLayer()
    }, 500)
  },
  {
    deep: true
  }
)
watch(
  () => timerIndex.value,
  newV => {
    if (gdskjcCurrentActive.value == 'WIND') {
      layers.clearLayers()
    }
    handleShowLayer()
  },
  {
    deep: true
  }
)
onMounted(() => {
  initData()
  if (layers) layers.clearLayers()
  setTimeout(() => {
    if (gdskjcCurrentActive.value !== 'none') {
      handleShowLayer(gdskjcCurrentActive.value)
    }
  }, 100)
})
onUnmounted(() => {
  layers.clearLayers()
})
</script>

<style scoped lang="scss"></style>
